<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
  <script type="text/javascript" src="../easyui/jquery.min.js"></script>
  <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

  <script type="text/javascript">

		var columns = [
			[
				{
					field: '',
					width: 50,
					checkbox: true,
				},
				{
					field: 'id',
					title: '编号',
					width: 100,
					align: 'center'
				},
				{
					field: 'name',
					title: '名称',
					width: 100,
					align: 'center'
				},
				{
					field: 'permission',
					title: '权限',
					width: 100,
					align: 'center',
					editor: {
						type: 'combobox',
						options: {
							valueField: 'id',
							textField: 'text',
							panelHeight: 'auto',
							data: [
								{id: 'read', text: '查看'},
								{id: 'edit', text: '编辑'},
							],
							value: 'read',
							onChange: function (newParam, oldParam) {

							}
						}
					}
				}
			]
		];

		var tableData = [
			{
				id: 'tb_1001',
				name: 'Sheet1'
			},
			{
				id: 'tb_1002',
				name: 'Sheet2'
			},
			{
				id: 'tb_1003',
				name: 'Sheet3'
			},
			{
				id: 'tb_1004',
				name: 'Sheet4'
			},
		];

		var StateDialog = {
			id: 'state_dialog',
			_this: function () {
				return $('#' + this.id);
			},
			open: function () {
				StateDialog._this().dialog({
					buttons: [
						{
							text: '取消',
							handler: function () {
								debugger
								console.log("取消按钮点击了");

							}
						},
						{
							text: '确定',
							handler: function () {
								debugger
								console.log("确定按钮点击了");
								let rows = SheetTabsTable._this().datagrid('getRows');
								console.log(rows);
							}
						}
					]
        })
				StateDialog._this().dialog('open');
				SheetTabsTable.init();
				SheetTabsTable.loadData();
			},

		};

		var SheetTabsTable = {
			id: 'sheet_tabs_table',
			_this: function () {
				return $('#' + this.id);
			},

			init: function () {
				SheetTabsTable._this().datagrid({
					columns: columns,
					onClickRow: function (index) {
						debugger
						console.log(index);
						SheetTabsTable._this().datagrid('beginEdit', index);
					},
					onAfterEdit: function (rowIndex, rowData, changes) {
						SheetTabsTable._this().datagrid('endEdit', rowIndex);
					}
				})
			},

			loadData: function () {
				SheetTabsTable._this().datagrid('loadData', {rows: tableData});
			}

		};

  </script>


</head>
<body>

<button id="btn" onclick="StateDialog.open()">显示弹框</button>

<div id="state_dialog" class="easyui-dialog" style="display: none; width: 600px; height: 400px;"
     data-options="closed:true">
  <table class="easyui-datagrid" id="sheet_tabs_table" data-options="fit:true,singleSelect:true" style="width: 100%">
  </table>
</div>

</body>
</html>
